<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <!-- 
    <view class="nav-bar">
      <view class="left">
        <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
      </view>
      <view class="title">风险/健康评估</view>
    </view> 
    -->
    
    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y style="height: 100%; padding-bottom: 100rpx;" :bounce="true">
      <view class="content">
        <!-- 顶部卡片 -->
        <view class="welcome-card">
          <view class="welcome-text">
            <text class="greeting">您好!</text>
            <text class="subtitle">欢迎查看卒中风险评估报告</text>
          </view>
          <image class="welcome-image" src="/static/assessment-icon.png" mode="aspectFit"></image>
        </view>

        <!-- 风险评估报告 -->
        <view class="section">
          <view class="section-header">
            <text class="section-title">脑卒中复发风险评估报告</text>
          </view>
        </view>
        
        <view class="questionaire-list">
          <view
            class="card"
            v-for="(item, index) in filteredRQuestionaireList"
            :key="item.id"
            @click="goToDetail(item.id)"
          >
            <view class="card-content">
              <!-- 彩色图标 -->
              <u-icon
                :name="icons[index % icons.length]"
                size="48"
                :color="colors[index % colors.length +4]"
                class="card-icon"
              ></u-icon>

          
              <!-- 问卷名称 -->
              <view class="card-text">
                <view class="card-title">{{ item.name }}</view>
                <view class="card-desc">{{ item.description || '点击查看记录' }}</view>
              </view>
          
              <!-- 右箭头 -->
              <u-icon name="arrow-right" color="#ccc" size="28" class="arrow-icon"></u-icon>
            </view>
          </view>
          
          <!-- 卒中复发风险测算 -->
          <view class="card" @click="goToRiskDetail()">
            <view class="card-content">
              <!-- 彩色图标 -->
              <u-icon
                :name="icons[1]"
                size="48"
                :color="colors[5]"
                class="card-icon"
              ></u-icon>
          
              <!-- 问卷名称 -->
              <view class="card-text">
                <view class="card-title">脑卒中风险评估报告（5-10年）</view>
                <view class="card-desc">{{ '点击查看记录' }}</view>
              </view>
          
              <!-- 右箭头 -->
              <u-icon name="arrow-right" color="#ccc" size="28" class="arrow-icon"></u-icon>
            </view>
          </view>
        </view>

        <!-- 健康评估报告 -->
        <view class="section" style="margin-top: 15rpx" >
          <view class="section-header">
            <text class="section-title">健康评估报告</text>
          </view>
        </view>
        
        <view class="questionaire-list">
          <view
            class="card"
            v-for="(item, index) in filteredHQuestionaireList"
            :key="item.id"
            @click="goToDetail(item.id)"
          >
            <view class="card-content">
              <!-- 彩色图标 -->
              <u-icon
                :name="icons[index % icons.length]"
                size="48"
                :color="colors[index % colors.length]"
                class="card-icon"
              ></u-icon>
          
              <!-- 问卷名称 -->
              <view class="card-text">
                <view class="card-title">{{ item.name }}</view>
                <view class="card-desc">{{ item.description || '点击查看记录' }}</view>
              </view>
          
              <!-- 右箭头 -->
              <u-icon name="arrow-right" color="#ccc" size="28" class="arrow-icon"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 自定义tabBar -->
    <custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
  </view>
</template>
<script>
import { getQuestionaireList } from '@/common/api';
export default {
    data() {
        return {
			RquestionaireList:[],//风险报告
			HquestionaireList: [],//健康报告
			icons: ['file-text', 'file-text', 'file-text', 'file-text', 'file-text'], // uView 图标名
			colors: ['#FF7F50', '#6495ED', '#32CD32', '#FF69B4', '#FFA500','#CC99E6'], // 图标颜色
			showCustomTabBar: true, // 显示自定义TabBar
				completedAssessments: {
					stroke: false,
					recurrence: false,
					efficacy: false,
					decision: false,
					health: false
				},
				reports: {
					risk: 0,
					health: 0
				}
			}
		},
		onLoad() {
			this.loadQuestionaireList();
			  uni.$on('page-show', () => {
			    if (!this.shouldUpdate) return;
			    this.updateTabBar();
			  });
		},	
		onShow() {
		//uni.$emit('page-show'); 
	    },
		computed: {
		  filteredRQuestionaireList() {
		    return this.RquestionaireList.filter(item => item.name == '脑卒中风险评估（Essen）');
		  },
		  filteredHQuestionaireList() {
			return this.HquestionaireList.filter(item => item.name !== '系统可用性' && item.name !== '脑卒中风险评估（Essen）' && item.name !== '卒中复发风险测算');
		  }
		},
    methods: {
		async loadQuestionaireList(){
			try{
				const qlRes = await getQuestionaireList()
				this.RquestionaireList = qlRes.rows
				this.HquestionaireList = qlRes.rows
				console.log(qlRes.rows)
			}
			catch (e) {
			  console.error('加载问卷列表失败', e)
			}
		},
			goBack() {
				uni.navigateBack()
			},
			//风险报告
			goToDetail(id) {
			  uni.navigateTo({
			    url: `/pages/assessment/assessment-reports?id=${id}`
			  });
			},
			goToRiskDetail() {
			  uni.navigateTo({
			    url: '/pages/assessment/qr-reports'
			  });
			},
    }
}
</script>

<style lang="scss">
	
	.header {
	  font-size: 40rpx;
	  font-weight: 600;
	  color: #333;
	  margin-bottom: 30rpx;
	  text-align: center;
	}
	
	.questionaire-list {
	  display: flex;
	  flex-direction: column;
	  gap: 24rpx;
	}
	
	.card {
	  background: linear-gradient(135deg, #ffffff, #f9fbfc);
	  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
	  border-radius: 20rpx;
	  padding: 28rpx;
	  transition: transform 0.2s;
	}
	
	.card:active {
	  transform: scale(0.98);
	}
	
	.card-content {
	  display: flex;
	  align-items: center;
	}
	
	.card-icon {
	  margin-right: 24rpx;
	}
	
	.card-text {
	  flex: 1;
	}
	
	.card-title {
	  font-size: 32rpx;
	  font-weight: 500;
	  color: #222;
	  margin-bottom: 8rpx;
	  font-weight: bold;
	}
	
	.card-desc {
	  font-size: 26rpx;
	  color: #888;
	}
	
	.arrow-icon {
	  margin-left: 16rpx;
	}
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
    min-height: 100vh;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				flex: 1;
				text-align: center;
				margin-left: 60rpx;
			}
			
			.left {
				width: 60rpx;
			}
		}
		
		.content-scroll {
			flex: 1;
			height: calc(100vh - 90rpx);
		}
		
		.content {
			padding: 20rpx 30rpx;
			
			.welcome-card {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: linear-gradient(to right, #1890FF, #50C1E9);
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				color: #fff;
				
				.welcome-text {
					display: flex;
					flex-direction: column;
					
					.greeting {
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					
					.subtitle {
						font-size: 24rpx;
						opacity: 0.9;
					}
				}
				
				.welcome-image {
					width: 100rpx;
					height: 100rpx;
				}
			}
			
			.section {
				margin-bottom: 30rpx;
				
				.section-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.section-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						position: relative;
						padding-left: 20rpx;
						
						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 8rpx;
							height: 32rpx;
							background-color: #1890FF;
							border-radius: 4rpx;
						}
					}
					
					.section-more {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: #999;
					}
				}
				
				.assessment-card {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
                display: flex;
                align-items: center;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
                
					.card-icon {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    display: flex;
						justify-content: center;
                    align-items: center;
                    margin-right: 20rpx;
                }
                
					.card-content {
                    flex: 1;
                    
						.card-name {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
							margin-bottom: 8rpx;
                    }
                    
						.card-desc {
							font-size: 26rpx;
                        color: #999;
							text-align: right;
						}
					}
				}
				
				.card-grid {
					display: flex;
					flex-wrap: wrap;
					margin: 0 -10rpx;
					justify-content: center; /* 新增样式，使子元素水平居中 */
					
					.grid-item {
						width: calc(40% - 20rpx);
						background-color: #fff;
						border-radius: 16rpx;
						padding: 30rpx 20rpx;
						margin: 10rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
						
						.card-icon {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
                            display: flex;
							justify-content: center;
							align-items: center;
                            margin-bottom: 20rpx;
						}
                
						.item-name {
                    font-size: 28rpx;
							color: #333;
							font-weight: bold;
							text-align: center;
						}
						
						.u-icon {
							position: absolute;
							top: 20rpx;
							right: 20rpx;
						}
					}
				}
				
				.report-cards {
					.report-card {
						background-color: #fff;
						border-radius: 16rpx;
						padding: 30rpx;
						margin-bottom: 20rpx;
                display: flex;
                align-items: center;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
						transition: all 0.3s ease;
						position: relative;
						overflow: hidden;
						
						&:active {
							transform: scale(0.98);
							box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
						}
						
						.report-icon {
							width: 80rpx;
							height: 80rpx;
							border-radius: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 20rpx;
							flex-shrink: 0;
						}
						
						.report-info {
							flex: 1;
							
							.report-name {
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
								margin-bottom: 8rpx;
							}
						}
						
						.report-count {
							margin-right: 20rpx;
							
							text {
								font-size: 28rpx;
								color: #999;
								font-weight: bold;
							}
							.card-desc {
								font-size: 26rpx;
							color: #999;
								text-align: right;
							}
                    }
                }
            }
        }
    }
}
</style> 